<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<html>
<script src="<%=basePath%>/js/jquery.js"></script>
<script>
    function _validate() {
        alert(<%=session.getAttribute("strCode")%>);
        <%--var strCode = ${strCode};//这里用的freemarke取到后台保存在session中的验证码字符。--%>
        var strCode ="1234";
        var inpCode = $('#authCode').val();
        if(strCode==""||strCode == null){
            chageCode();
            $("#message2").text("验证码不正确");
            //用后台的字符与页面输入的验证码进行比较
        }else if(inpCode == strCode){
            return true;
        }
    }
    function login(){
        if(!_validate()){
            return false;
        }
        $.ajax({
            type:"POST",
            url : "<%=basePath%>user/login.do",
            data : {
                userName : $(".userName").val(),
                password : $(".password").val()
            },
            success : function(meg) {
               if(meg =="ok"){
                   window.location="<%=basePath%>user/main.do";
                }else{
                   $("#message").text(meg);
                }
            },
            error:function (XMLHttpRequest, textStatus, errorThrown) {
                alert("网络错误");
            }

        });
    }
    function chageCode(){
        $('#codeImage').attr('src','<%=basePath%>user/authCode.do?abc='+Math.random());//链接后添加Math.random，确保每次产生新的验证码，避免缓存问题。
    }
</script>
<head>
    <title>Title</title>
</head>
<body>

         用户名<input class="userName" type="text">
         密码 <input class="password" type="password"><span id="message"></span>
         验证码<input id="authCode"  type="text"><span id="message2"></span>
         <!--这里img标签的src属性的值为后台实现图片验证码方法的请求地址-->
         <label><img type="image" src="<%=basePath%>user/authCode.do" id="codeImage" onclick="chageCode()" title="图片看不清？点击重新得到验证码" style="cursor:pointer;"/></label>
         <label><a onclick="chageCode()">换一张</a></label>
         <button  onclick="login()">登录</button>

</body>
</html>
